body{
  background-color: chartreuse;
  margin: 0;
  padding: 0;
  margin: 0;
  height: 100vh;
  background: linear-gradient(270deg, #ff00ff, #00ffff, #ffff00, #ff0000);
  background-size: 800% 800%;
  animation: psychedelic 20s ease infinite;
}

  @keyframes psychedelic {
    0% {
      background-position: 0% 50%;
    }

    50% {
      background-position: 100% 50%;
    }

    100% {
      background-position: 0% 50%;
    }

  }

  h1,
  h2 {
    font-family: "UnormativeFraktur", sans-serif;
  }

  strong {
    font-size: xx-large;
    color: black;
    font-weight: bold;
    font-family: "UnormativeFraktur", sans-serif;
    margin-right: 10px;
  }

  .container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 50px 20px;
  }

  figure {
    margin: 0;
    display: flex;
    flex-direction: column;
  }

  figure:hover img {
    filter: grayscale(0);
  }

  h1 {
    text-align: center;
  }

  /* 🔹 Listes et liens */
  ul {
    list-style: none;
    padding: 0;
  }

  img {
    max-width: 50%;
    max-height: 50%;
    width: 650px;
    padding: 2px;
    border: 10px;
    border-radius: 25px;
    width: 100%;
    height: 100%;
    object-fit: cover;

    filter: grayscale(1);
    transition: all .5s;
  }

  .hover-gradient {
    background: linear-gradient(90deg, #ff0080, #ff8c00, #40e0d0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 300%;
    transition: background-position 0.5s;
    text-decoration: none;
  }

  .hover-gradient:hover {
    background-position: 100%;
  }

  /* 🔹 Animation arc-en-ciel pour le titre */
  .rainbow-animate {
    font-size: 3em;
    font-weight: bold;
    text-transform: uppercase;
    background: linear-gradient(270deg, red, orange, yellow, green, cyan, blue, violet);
    background-size: 1000% 1000%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: rainbowShift 12s linear infinite;
  }

  @keyframes rainbowShift {
    0% {
      background-position: 0% 50%;
    }

    50% {
      background-position: 100% 50%;
    }

    100% {
      background-position: 0% 50%;
    }
  }

  footer {
    text-align: center;
  }